<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>

<script type="text/javascript">

function desplegarDetalle(idSolicitud){
	
	var jsonData = {idSolicitud:idSolicitud};
	$.ajax({
	    type: 'POST',
	    data: jsonData,
	    dataType: 'json',
	    url:  '${appCtx}/conexia-rrhh/getCandidatosInforme',
	    complete: function(rsp){
	    	if(rsp.responseText!=undefined){

	    	    $('#tablaCandidatos').jqGrid('clearGridData');
	    		jQuery("#tablaCandidatos").jqGrid(
	    			{ datatype: "local", 
	    				height: 'auto', 
	    				width: '900px',
		    	        shrinkToFit: false,
	    				colNames:['Apellido','Nombre', 'Fecha Nacimiento', 'Condiciones Laboral Actual','Estado'], 
	    				colModel:[ 
							{name: 'apellido', index: 'apellido' ,align: 'left',width:200},
							{name: 'nombre', index: 'nombre',align: 'left', width:200},
							{name: 'fechaNacimiento', index: 'fechaNacimiento',align: 'left', width:110},
							{name: 'condicionesLaboralActual', index: 'condicionesLaboralActual',align: 'left', width:200},
							{name: 'estado', index: 'estado',align: 'center', width:100, sortable:false}],
	    			caption: "Candidatos Entrevistados" });
				
	    		var mydata = jQuery.parseJSON(rsp.responseText);
	    		for(var i=0;i<=mydata.length;i++)
	    			jQuery("#tablaCandidatos").jqGrid('addRowData',i+1,mydata[i]);
	    		
	    		$("#divTablaCandidatos").slideDown();
			}else{
				mostrarMensaje('Ha ocurrido un error. Intente realizar la operaci&oacute;n nuevamente. Si el error persiste, por favor contacte al administrador del sistema.',false,'');
			}
	    	
	    }
	});
}


$(function() {
    tableToGrid("#tablaSolicitudesAbiertas", {
        caption:'Lista de Solicitudes Abiertas',
        height: 'auto',
        shrinkToFit: false,
        colModel :[ {name: 'fechaSolicitud', index: 'fechaSolicitud' ,align: 'left',width:110},
                    {name: 'oficina', index: 'oficina',align: 'left', width:100},
                    {name: 'fechaEsperadaIncorporacion', index: 'fechaEsperadaIncorporacion',align: 'left', width:140},
                    {name: 'perfil', index: 'perfil',align: 'left', width:100},
                    {name: 'solicitante', index: 'solicitante',align: 'left', width:100},
                    {name: 'superior', index: 'superior',align: 'left', width:100},
                    {name: 'cantidadVacantes', index: 'cantidadVacantes',align: 'left', width:100},
                    {name: 'estadoSolicitudId', align: 'left', width:100, sortable:false},
                    {name: 'accion', align: 'center', width:110, sortable:false}
                  ]});

    
    $("#divTablaCandidatos").hide();
    
    $("[name='botonCandidatos']").click(function() {
    	desplegarDetalle(this.id);
    });
    
});
</script>
<br /><br />
<div style="width: 900px; position: relative; margin: auto;">
    <table id="tablaSolicitudesAbiertas">
        <tr>
            <th id="fechaSolicitud">Fecha Solicitud</th>
            <th id="oficina">Oficina</th>
            <th id="fechaEsperadaIncorporacion">Fecha Incorporacion</th>
            <th id="perfil">Perfil</th>
            <th id="solicitante">Solicitante</th>
            <th id="superior">Superior</th>
            <th id="cantidadVacantes">Vacantes</th>
            <th id="estadoSolicitudId">Estado</th>
            <th id="accion">&nbsp;</th>
        </tr>
        <c:forEach var="solicitud" items="${solicitudes}">
	        <tr>
	            <td>${solicitud.fechaSolicitud}</td>
	            <td>${solicitud.oficinaDescripcion}</td>
	            <td>${solicitud.fechaEsperadaIncorporacion}</td>
	            <td>${solicitud.perfilNombre}</td>
	            <td>${solicitud.gerenteSolicitante}</td>
	            <td>${solicitud.superiorDirecto}</td>
	            <td>${solicitud.cantidadVacantes}</td>
	            <td>${solicitud.estadoSolicitudDescripcion}</td>
	            <td><input type="button" id="${solicitud.idSolicitud}" name="botonCandidatos" 
	            		  class="button" value="Ver Candidatos"></td>
	        </tr>
        </c:forEach>
    </table>
</div>
<br/>
<div class="separador">&nbsp;</div>
<br/>
<!-- LISTA DE CANDIDATOS PARA LA SOLICITUD SELECCIONADA -->
<div id="divTablaCandidatos" style="width:900px;position:relative;margin:auto;">
    <table id="tablaCandidatos" style="margin:auto">
    <tr>
		<th id="apellido">Apellido</th>
		<th id="nombre">Nombre</th>
		<th id="fechaNacimiento">Fecha Nacimiento</th>
		<th id="condicionesLaboralActual">Condicion Actual</th>
		<th id="estado">Estado</th>
	</tr>
	</table>
</div>